<template>
  <div class="app-container">
    <van-nav-bar :title="title" left-arrow fixed @click-left="back" />
    <div class="container-box">
      <div class="form-container">
        <template v-for="(item,index) in formEl">
          <dynamic-form :key="index" :form-el="item.data" />
          <van-button v-if="formEl.length>1" :key="index" block type="default" @click="delClick(index)">
            - 删除
          </van-button>
        </template>
        <!-- <dynamic-form :form-el="formEl.data" /> -->
      </div>

      <div class="opration-box flex">
        <!-- v-if="isAddNew" -->
        <van-button class="btn-cls" round block type="default" @click="getNewLine(1)">
          + 新增
        </van-button>
        <!-- <div class="formSubmitBtn"> -->
        <van-button class="btn-cls" round block type="info" @click="submitProcess(1)">
          保存
        </van-button>
      <!-- </div> -->
      </div>
    </div>
  </div>
</template>
<script>
import DynamicForm from '@/components/d-form/DynamicForm'
import { homeApi } from '@/api/home.js'
import store from '../store'
import { Toast } from 'vant'

export default {
  name: 'InputForm',
  components: {
    DynamicForm
  },
  data () {
    return {
      listStore: {},
      key: '',
      title: '',
      isAddNew: false,
      formEl: []
    }
  },
  created () {
    this.key = this.$route.query.key
    this.title = this.$route.query.title
    // this.listStore = store.getkey('listData') || {}
    this.listStore = store.getkey(this.key) || []
    this.init()
  },
  methods: {
    // 取得key的组别是否可以输入多条记录
    init: function () {
      const $this = this
      const list = store.get()
      console.log('list', list)
      if (list.length <= 0) {
        this.getNewLine()
        return
      }
      list.some((v, index) => {
        if (v.keyid === $this.key) {
          $this.isAddNew = v.multiRow

          // 如果FORM的JSON还未加载过
          if (v.formEl === undefined) {
            this.getNewLine()
          } else {
            // 如果缓存没有数据，有则只显示缓存的数据，没有则需要加入一笔输入块
            if (!$this.loadStorage()) {
              $this.formEl.push({ index: 0, data: v.formEl })
            }
          }
          return true
        }
      })
    },

    // 加载缓存的数据
    loadStorage: function() {
      const $this = this
      const list = $this.listStore[$this.key]
      if (!store.isNull(list)) {
        list.forEach((item, index) => {
          $this.formEl.push({ index: index, data: item.data })
        })
        return true
      }
      return false
    },

    // 将Form元素的JSON存入缓存
    setStorage: function(data) {
      const $this = this
      var list = store.get()
      list.forEach((item, index) => {
        if (item.keyid === $this.key) {
          item.formEl = data
          list[index] = item
          store.set(list)
        }
      })
    },
    // 获取form表单数据
    /**
     * @params {Number} num 0.初始化调用 1.手动调用
     */
    getNewLine: function() {
      const $this = this
      const data = {
        keyid: $this.key
      }
      // debugger
      homeApi.input({}, data).then(res => {
        if (res.code === 200) {
          $this.formEl.push({ index: $this.formEl.length, data: res.data })
          $this.setStorage(res.data)
          // this.formEl = { index: this.formEl.length, data: res.data }
          // $this.submitProcess(0)
        } else {
          throw new Error(JSON.stringify(res))
        }
      }).catch(err => {
        console.error('err', err)
      })
      // const url = window.g.WEBAPI_HOST_URL + 'api/v1/Forms/input?keyid=' + this.key
      // request.post(url).then(response => {
      // })
    },
    showData: function () {
      Toast(this.item.value)
    },
    submitProcess: function (num) {
      const $this = this
      var listStore = store.getkey('listData') || {}
      if (!listStore[$this.key]) {
        listStore[$this.key] = {}
      }
      listStore[$this.key] = $this.formEl
      store.setkey('listData', listStore)
      if (num === 1) {
        this.back() // 返回上一页
      }
    },
    back () {
      this.$router.go(-1)
    },
    delClick: function(index) {
      var listStore = store.getkey('listData') || {}
      listStore.splice(index, 1)
      store.setkey('listData', listStore)
    }
  }
}
</script>
<style lang="scss" scoped>
// $btnH: 60px;
// .form-container {
//   min-height: 50vh;
//   padding-bottom: $btnH + 10px;
// }
// .opration-box {
//   position: fixed;
//   bottom: 0;
//   left: 0;
//   margin-top: 30px;
//   width: 100%;
//   height: $btnH;
//   background: #fff;
//   border-top: 1px solid #eee;
//   box-shadow: 0px -3px 20px 0px #bbb;
//   justify-content: space-around;
//   .btn-cls {
//     width: 45%;
//     box-shadow: 0 0px 4px 0 #bbb;
//   }
// }
</style>
